import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Input, Textarea } from '@tarojs/components'
import './index.scss'

class AddressFormInput extends Component {

	static propTypes = {
		label: PropTypes.string,
		initValue: PropTypes.string,
		placeholder: PropTypes.string,
		inputType: PropTypes.string,			// input textarea
		type: PropTypes.string,						// input类型
		maxLength: PropTypes.number,
		flexBasic: PropTypes.string,
		disabled: PropTypes.bool,
		onChange: PropTypes.func,
		onFocus: PropTypes.func,
		onBlur: PropTypes.func,
	}

	static defaultProps = {
		label: '',
		initValue: '',
		placeholder: '',
		type: 'text',
		inputType: 'input',
		maxLength: 100,
		disabled: false,
		flexBasic: '188',
	}

	onChange = (val) => {
		const { onChange } = this.props
		onChange && onChange(val)
	}

	onFocus = () => {
		const { onFocus } = this.props
		onFocus && onFocus()
	}

	onBlur = () => {
		const { onBlur } = this.props
		onBlur && onBlur()
	}

	render(){
		const { disabled, label, initValue, placeholder, type, flexBasic, inputType, maxLength } = this.props
		return(
			<View className="address-form-input-container">
				<View
					className={`label ${flexBasic === '50' ? 'basic-50' : ''}`}
				>{label}</View>
				<View className="input-box">
					{
						inputType === 'input' &&
						<Input
							className="input-class"
							value={initValue}
							type={type}
							disabled={disabled}
							maxLength={maxLength}
							onChange={(val) => this.onChange(val.detail.value)}
							placeholder={placeholder}
							onFocus={() => this.onFocus()}
							onBlur={() => this.onBlur()}
						></Input>
					}
					{
						inputType === 'textarea' &&
						<Textarea
							className="textarea-class"
							value={initValue}
							disabled={disabled}
							maxLength={maxLength}
							onChange={(val) => this.onChange(val.detail.value)}
							placeholder={placeholder}
						></Textarea>
					}
				</View>
			</View>
		)
	}
}

export default AddressFormInput